<template>
  <div class="konwledge">
    <!-- 左边的内容 -->
    <div class="left">
      <div class="_3dE21Z8kljGaURC-u52HoH">
        <div
          class="XifRPckEIhR-ii13RLWBw"
          v-for="item in knowlist"
          :key="item.id"
        >
          <KnowledgeItem :item="item"></KnowledgeItem>
        </div>
      </div>
    </div>
    <!-- 右边的内容 -->
    <div class="right">
      <div class="sticky">
        <!-- <div
          class="recommend"
          v-if="recommendFlag"
          :style="{ marginTop: i + 'px' }"
        ></div> -->

        <RightLayout :articleList="articleList.slice(0, 6)" />

        <ClassifyArticles />
        <RightBotm />
      </div>
    </div>
  </div>
</template>

<script>
import RightBotm from "@/components/RightBotm.vue";
import ClassifyArticles from "@/components/ClassifyArticles.vue";
import RightLayout from "@/components/RightLayout.vue";
import KnowledgeItem from "@/components/Konwledge/KnowledgeItem.vue";

import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState({
      knowlist: (state) => state.knowledge.knowlist,
      articleList: (state) => state.article.articleList,
    }),
  },
  methods: {
    ...mapActions({ getknow: "knowledge/getKnowLedge" }),
    // headleScroll() {
    //   let scroll =
    //     window.pageYOffset ||
    //     document.documentElement.scrollTop ||
    //     document.body.scrollTop;
    //   if (scroll > this.i || scroll === 0) {
    //     this.i = scroll;
    //     this.recommendFlag = false;
    //   } else {
    //     this.i = scroll;
    //     this.recommendFlag = true;
    //   }
    // },
  },
  data() {
    return {
      recommendFlag: false,
      i: 0,
    };
  },
  mounted() {
    // 滚动事件
    window.addEventListener("scroll", this.headleScroll, true);
  },
  created() {
    this.getknow();
  },
  components: {
    KnowledgeItem,
    RightLayout,
    ClassifyArticles,
    RightBotm,
  },
};
</script>

<style scoped>
._3dE21Z8kljGaURC-u52HoH {
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-second);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
}
.XifRPckEIhR-ii13RLWBw {
  /* position: relative; */
}
.right .sticky {
  position: sticky;
  transform: translateY(0px);
  margin-top: 0px;
  top: 1rem;
  margin-bottom: 1rem;
}
</style>
